<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>繁育情况</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <link rel="stylesheet" href="../../../assets/module/niuniu/bootstrap.min.css">
    <link rel="stylesheet" href="../../../assets/module/niuniu/font-awesome.min.css">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #8BC34A;
            --warning-color: #FFC107;
        }

        body {
            background-color: #f5f7fa;
            font-family: '微软雅黑', sans-serif;
        }

        .dashboard-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .nav-pills .nav-link.active {
            background-color: var(--primary-color) !important;
        }

        .dashboard-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .dashboard-card:hover {
            transform: translateY(-5px);
        }

        .vital-stat {
            font-size: 2.2rem;
            color: var(--primary-color);
            font-weight: 600;
        }

        .alert-custom {
            border-left: 4px solid var(--warning-color);
            background: white;
        }

        .sensor-status {
            padding: 15px;
            border-radius: 12px;
            background: linear-gradient(45deg, #f8f9fa, #ffffff);
        }

        #pastureMap {
            height: 300px;
            background: #e9ecef;
            border-radius: 12px;
        }

        .vaccination-progress {
            height: 8px;
            border-radius: 4px;
            background-color: #e9ecef;
        }

        .livestock-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
    </style>
</head>
<body>
<header class="dashboard-header">
    <div class="container-fluid">
        <div class="d-flex align-items-center justify-content-between">
            <h3 class="mb-0"><i class="fa fa-paw mr-2"></i>智慧牧场防疫管理系统</h3>
            <div class="text-right">
                <span class="badge badge-pill badge-light">实时监测中</span>
                <small class="d-block mt-1">最后更新：2分钟前</small>
            </div>
        </div>
    </div>
</header>
<main class="container-fluid py-4">
    <div class="row">
        <!-- 左侧监测面板 -->
        <div class="col-lg-8">
            <div class="row">
                <!-- 关键指标 -->
                <div class="col-md-4 mb-4">
                    <div class="dashboard-card p-3">
                        <h6 class="text-muted">今日体温异常</h6>
                        <div class="vital-stat text-danger">3例</div>
                        <div class="progress vaccination-progress mt-2">
                            <div class="progress-bar bg-danger" style="width: 15%"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-4">
                    <div class="dashboard-card p-3">
                        <h6 class="text-muted">疫苗接种进度</h6>
                        <div class="vital-stat">87%</div>
                        <div class="progress vaccination-progress mt-2">
                            <div class="progress-bar bg-success" style="width: 87%"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-4">
                    <div class="dashboard-card p-3">
                        <h6 class="text-muted">消毒完成率</h6>
                        <div class="vital-stat">94%</div>
                        <div class="progress vaccination-progress mt-2">
                            <div class="progress-bar bg-info" style="width: 94%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 牧场三维地图 -->
            <div class="dashboard-card p-3 mb-4">
                <h5 class="mb-3"><i class="fa fa-map-marker-alt text-primary"></i> 牧场区域消毒热力图</h5>
                <div id="pastureMap" class="mb-3"></div>
                <div class="row">
                    <div class="col">
                        <span class="badge badge-danger">高风险区</span>
                        <span class="badge badge-warning">观察区</span>
                        <span class="badge badge-success">安全区</span>
                    </div>
                </div>
            </div>

            <!-- 智能分析图表 -->
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div class="dashboard-card p-3">
                        <h5>疫病趋势分析</h5>
                        <div id="diseaseChart" style="height:250px"></div>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="dashboard-card p-3">
                        <h5>防疫物资消耗</h5>
                        <div id="suppliesChart" style="height:250px"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧操作面板 -->
        <div class="col-lg-4">
            <!-- 实时预警 -->
            <div class="dashboard-card p-3 mb-4">
                <h5 class="mb-3"><i class="fa fa-bell text-warning"></i> 实时预警</h5>
                <div class="alert-custom p-2 mb-2">
                    <div class="d-flex align-items-center">
                        <i class="fa fa-exclamation-triangle text-warning fa-lg mr-2"></i>
                        <div>
                            <small>3号牛舍温度异常：38.6℃</small>
                            <div class="text-muted">2023-08-20 14:30</div>
                        </div>
                    </div>
                </div>
                <div class="alert-custom p-2">
                    <div class="d-flex align-items-center">
                        <i class="fa fa-tint text-primary fa-lg mr-2"></i>
                        <div>
                            <small>消毒剂库存不足（剩余23L）</small>
                            <div class="text-muted">建议立即补货</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="dashboard-card p-3 mb-4">
                <h5 class="mb-3"><i class="fa fa-bolt text-success"></i> 快速操作</h5>
                <div class="row">
                    <div class="col-6 mb-2">
                        <button class="btn btn-block btn-outline-primary btn-sm">
                            <i class="fa fa-syringe"></i> 疫苗登记
                        </button>
                    </div>
                    <div class="col-6 mb-2">
                        <button class="btn btn-block btn-outline-warning btn-sm">
                            <i class="fa fa-biohazard"></i> 疫情上报
                        </button>
                    </div>
                    <div class="col-6 mb-2">
                        <button class="btn btn-block btn-outline-info btn-sm">
                            <i class="fa fa-spray-can"></i> 消毒记录
                        </button>
                    </div>
                    <div class="col-6 mb-2">
                        <button class="btn btn-block btn-outline-danger btn-sm">
                            <i class="fa fa-file-medical"></i> 检疫报告
                        </button>
                    </div>
                </div>
            </div>

            <!-- 牲畜健康榜 -->
            <div class="dashboard-card p-3">
                <h5 class="mb-3"><i class="fa fa-award text-danger"></i> 健康标兵</h5>
                <div class="list-group">
                    <div class="d-flex align-items-center py-2">
                        <img src="cow-avatar1.jpg" class="livestock-avatar mr-3">
                        <div>
                            <strong>#9012 西门塔尔牛</strong>
                            <div class="text-success">连续18个月健康监测正常</div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center py-2">
                        <img src="cow-avatar2.jpg" class="livestock-avatar mr-3">
                        <div>
                            <strong>#3456 荷斯坦牛</strong>
                            <div class="text-success">最佳产奶质量保持者</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="${ctxPath}/assets/libs/echarts/echarts.min.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echartsTheme.js"></script>
<!--<script src="${ctxPath}/assets/libs/niuniu/jquery-3.7.1.min.js"></script>-->
<script src="${ctxPath}/assets/libs/niuniu/bootstrap.min.js"></script>

<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'element'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;

        // 渲染活动情况预测
        var diseaseChart = echarts.init(document.getElementById('diseaseChart'), myEchartsTheme);
        diseaseChart.setOption({
            tooltip: {trigger: 'axis'},
            xAxis: {
                type: 'category',
                data: ['口蹄疫', '布鲁氏菌', '结核病', '乳房炎', '其他'],
                axisLabel: {rotate: 45}
            },
            yAxis: {type: 'value'},
            series: [{
                type: 'bar',
                data: [12, 8, 6, 15, 3],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#4CAF50'},
                        {offset: 1, color: '#8BC34A'}
                    ])
                }
            }]
        });

        const suppliesChart = echarts.init(document.getElementById('suppliesChart'), myEchartsTheme);
        suppliesChart.setOption({
            tooltip: {trigger: 'item'},
            series: [{
                type: 'pie',
                radius: ['40%', '70%'],
                data: [
                    {value: 35, name: '消毒剂'},
                    {value: 25, name: '疫苗'},
                    {value: 20, name: '防护服'},
                    {value: 15, name: '检测试剂'}
                ],
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                }
            }]
        });
        console.log("aaaaaaa")
    })
</script>
</body>
</html>
